<template>
  <el-container style="height: 100%;">
    <!-- 左侧二级导航 -->
    <el-aside width="220px" style="background-color: #f5f7fa; border-right: 1px solid #e4e7ed;">
      <el-menu
          :default-active="activePath"
      mode="vertical"
      @select="handleSelect"
      background-color="#f5f7fa"
      text-color="#333"
      active-text-color="#1890ff"
      style="height: 100%; border-right: none;"
      ref="menu"
      >
      <el-menu-item index="/home/analysis/deviceHealthAnalysis">
        <i class="el-icon-s-platform"></i>
        <span>设备健康度分析</span>
      </el-menu-item>

      <el-menu-item index="/home/analysis/faultDeepAnalysis">
        <i class="el-icon-s-data"></i>
        <span>故障深度分析</span>
      </el-menu-item>

        <el-menu-item v-if="hasPermission('device:follow')" index="/home/analysis/worktest">
          <i class="el-icon-setting"></i>
          <span>跟踪设备维修</span>
        </el-menu-item>

<!--        <el-menu-item index="/home/analysis/maintainEffectAnalysis">-->
<!--          <i class="el-icon-s-tools"></i>-->
<!--          <span>维护效能分析</span>-->
<!--        </el-menu-item>-->

<!--      <el-menu-item index="/home/analysis/energyCostAnalysis">-->
<!--        <i class="el-icon-money"></i>-->
<!--        <span>能效成本分析</span>-->
<!--      </el-menu-item>-->

<!--      <el-menu-item index="/home/analysis/customAnalysis">-->
<!--        <i class="el-icon-setting"></i>-->
<!--        <span>自定义分析配置</span>-->
<!--      </el-menu-item>&ndash;&gt;-->

      </el-menu>
          </el-aside>

    <!-- 右侧内容区域（设备管理的子路由） -->
    <el-main style="padding: 20px;">
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
import {hasPermission} from "@/utils/permission";

export default {
  name: 'AnalysisManage',  // 修正组件名，与功能匹配
  data() {
    return {
      activePath: ''  // 存储当前选中的路径
    };
  },
  mounted() {
    // 初始化时设置默认选中项
    this.setDefaultActive();
  },
  methods: {
    hasPermission,
    handleSelect(key) {
      // 点击左侧导航项跳转对应子路由
      this.$router.push(key);
    },
    // 设置默认选中项（优先匹配当前路由，否则默认选中第一个）
    setDefaultActive() {
      const currentPath = this.$route.path;
      // 定义所有有效的导航项路径
      const validPaths = [
        '/home/analysis/deviceHealthAnalysis',
        '/home/analysis/faultDeepAnalysis',
        '/home/analysis/maintainEffectAnalysis',
        '/home/analysis/energyCostAnalysis',
        '/home/analysis/customAnalysis'
      ];
      // 匹配逻辑：当前路由有效则选中对应项，否则默认选中"设备健康度分析"
      this.activePath = validPaths.includes(currentPath) ? currentPath : '/home/analysis/deviceHealthAnalysis';
      // 手动更新菜单选中状态
      this.$refs.menu.activeIndex = this.activePath;
    }
  },
  watch: {
    // 路由变化时同步选中状态
    '$route'() {
      this.$nextTick(() => {
        this.setDefaultActive();
      });
    }
  }
};
</script>

<style scoped>
.el-aside {
  min-height: calc(100vh - 120px); /* 减去顶部和底部导航高度 */
}
.el-menu {
  border-right: none; /* 去除右侧边框 */
}

/* 强化选中样式，提升辨识度 */
:deep(.el-menu-item.is-active) {
  background-color: #e6f7ff !important; /* 浅蓝色背景，与主题色呼应 */
  color: #1890ff !important; /* 选中文字颜色 */
  font-weight: 500; /* 文字加粗 */
}

/* 优化悬停效果 */
:deep(.el-menu-item:not(.is-active):hover) {
  background-color: #f0f2f5; /* 浅灰背景，提升交互反馈 */
}

/* 增加菜单项间距和图标对齐 */
:deep(.el-menu-item) {
  padding-left: 30px !important; /* 图标与文字整体右移，避免贴边 */
  height: 50px; /* 增加菜单项高度，提升点击体验 */
  line-height: 50px;
}
</style>